import React, { Fragment, useRef, useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
export default function Count() {
  const inputRef = useRef()
  const [count, setCount] = useState(0)
  const [time, setTime] = useState(0)
  const students = [
    {
      name: 'zheng',
      id: '1',
      age: 18
    },
    {
      name: 'zheng',
      id: '2',
      age: 18
    }
  ]
  function handleAlert() {
    alert(inputRef.current.value)
  }
  function add() {
    setCount((count) => count + 1)
  }
  function unmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
  useEffect(() => {
    const timer = setInterval(() => {
      setTime((time) => time + 1)
    }, 1000)
    return () => {
      console.log('组件已卸载')
      clearInterval(timer)
    }
  }, [])
  return (
    <Fragment>
      <div>
        <input ref={inputRef} />
        <button onClick={handleAlert}>alert</button>
      </div>
      <div>
        <span>count:{count}</span>
        <button onClick={add}>add one</button>
      </div>
      <div>
        <span>time:{time}</span>
      </div>
      <div>
        {
          students.map(item => {
            return (
              <Fragment key={item.id}>
                <div>
                  <span>name:{item.name}</span>
                  <span style={{marginLeft: '10px'}}>age:{item.age}</span>
                </div>
              </Fragment>
            )
          })
        }
      </div>
      <div>
        <button onClick={unmount}>unmount</button>
      </div>
    </Fragment>
  )
}